<template>
    <div class="setup">
        <Header title="设置" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="box_setup" @click="password">
            <p>修改密码</p>
            <img class="turng" src="../assets/turnright.png" alt="">
        </div>
        <div class="box_setup">
            <p>关于我们</p>
            <img class="turng" src="../assets/turnright.png" alt="">
        </div>
        <div class="exit" @click="Exit">
            <p>退出登录</p>
        </div>
    </div>
</template>

<script>
import Header from './header'
import { Toast,MessageBox  } from "mint-ui";
export default {
    data(){
        return{

        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        password(){                             //跳转修改密码页面
            this.$router.push('/password');
        },
        Exit(){                                      //退出登录 清空本地缓存
            localStorage.clear();                       //清空本地所有缓存
            MessageBox({
                message:'您确定要退出登录吗?',
                showCancelButton: true,
                confirmButtonText:"确定",
                cancelButtonText:"取消"
            }).then( (res)=> {
                if(res === 'confirm'){
                     Toast({        
                        message: "退出成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    setTimeout( ()=> {
                        this.$router.push("/");
                    },2000)
                }
            })
            
        }
    }
}
</script>

<style scoped>
    .setup{
        /* position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0; */
        position: fixed;
        width: 100%;
        height: 100%;
        margin-top: 50px;
        background: #E5E5E5;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_setup{
        display: flex;
        height: 53px;
        line-height: 53px;
        padding: 0 4%;
        background: #FFFFFF;
    }
    .box_setup p{
        width: 90%;
        font-size: 18px;
        font-family: 'Microsoft';
        color: #000;
    }
    .box_setup .turng{
        height: 28px;
        transform: translateY(13px);
        position: absolute;
        right: 8px;
    }
    .exit{
        width: 100%;
        height: 53px;
        line-height: 53px;
        text-align: center;
        color: #FF0000;
        font-size: 18px;
        background: #FFFFFF;
        margin-top: 30px;
    }
</style>